<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta name="decorator" content="sysDefault"
	content="text/html; charset=utf-8" />
	
	
<script type="text/javascript">

	var num = '${fn:length(list)}';
	var list = Array();
	
	window.onload = function(){
		for(var i=0; i<num; i++){
			list.push(i);
		}
	};
	
	
	function formSubmit(value) {
		document.all("form").setAttribute("action", value);
		document.all("form").submit();
	}

	function InsertRow() {
		//  动态添加行  
        var newRow = document.createElement ("tr");  
        var newTd0 = document.createElement ("td");     
        var newTd1 = document.createElement ("td");     
        var newTd2 = document.createElement ("td");     
        var newTd3 = document.createElement ("td");     
        var newTd4 = document.createElement ("td");     
        //  动态添加内容  
        newTd0.innerHTML = '<span>模板变量名：<input type="text" value="" name="templateVariableName" id="templateVariableName'+num+'" '+
			'style="border: #7f9db9 1px solid; background: #FFFFFF; font-size: 12px; color: #333333; height: 20px; '+
				'line-height: 18px; width: 100px;" /></span>&nbsp;&nbsp;&nbsp;&nbsp;';

		newTd1.innerHTML = '<span>对象属性名：<input type="text" value="" name="objPropertyName" id="objPropertyName'+num+'" '+
			'style="border: #7f9db9 1px solid; background: #FFFFFF; font-size: 12px; color: #333333; height: 20px; '+
				'line-height: 18px; width: 100px;" /></span>&nbsp;&nbsp;&nbsp;&nbsp;';
					
		newTd2.innerHTML = '<span>属性类型： <select id="objPropertType'+num+'">' + '<option value="3">一般对象</option>'
				+ '<option value="1">字典</option>'
				+ '<option value="2">时间</option>'
				+ '<option value="0">文本</option>'
				+ '<option value="4">集合对象</option>' + '</select></span>&nbsp;&nbsp;&nbsp;&nbsp;';
		
		newTd3.innerHTML = '<span>数据格式： <input type="text" value="" name="objPropertFormat" id="objPropertFormat'+num+'" '+
				'style="border: #7f9db9 1px solid; background: #FFFFFF; font-size: 12px; color: #333333; height: 20px; '+
					'line-height: 18px; width: 100px;" /></span>&nbsp;&nbsp;&nbsp;&nbsp;';

		newTd4.innerHTML = '<a href="javascript:void(0)" onclick="removeFile(this, this.parentElement.parentElement.rowIndex)">&nbsp;&nbsp;删除</a>';
   
        newRow.appendChild (newTd0);     
        newRow.appendChild (newTd1);
        newRow.appendChild (newTd2);
        newRow.appendChild (newTd3);     
        newRow.appendChild (newTd4);     
        document.getElementById("tbody1").appendChild (newRow);
        list.push(num);
        num++;
	}
	
	function removeFile(id, index) {   
        var tr=id.parentNode.parentNode;  
        var tbody=tr.parentNode;  
        tbody.removeChild(tr); 
        list.splice(index, 1);
    } 

	function formSubmit(id){
		var jsonStr = "";
		jsonStr = "[";
		for(var i=0; i< list.length; i++){
			var templateVariableName = document.getElementById("templateVariableName"+list[i]).value;
			var objPropertyName = document.getElementById("objPropertyName"+list[i]).value;
			var objPropertType = document.getElementById("objPropertType"+list[i]).value;
			var objPropertFormat = document.getElementById("objPropertFormat"+list[i]).value;
			
			jsonStr += "{'templateVariableName':'"+templateVariableName+"', 'objPropertyName':'"+objPropertyName+"', 'objPropertType':'"+objPropertType+"', 'objPropertFormat':'"+objPropertFormat+"'}";
			if(i != num-1){
				jsonStr +=",";
			}
		}
		jsonStr += "]";
		
		var id = $("#t_id").val();
		var templateContent = $("#templateContent").val();
		var templateName = $("#templateName").val();
		post('${contextPath}/biz/contract/template/addOrUpdate', {
			id : id,
			templateContent : templateContent,
			templateName : templateName,
			jsonStr : jsonStr
		});
	}
	
	function post(URL, PARAMS) {        	//post提交
	    var temp = document.createElement("form");        
	    temp.action = URL;        
	    temp.method = "post";        
	    temp.style.display = "none";        
	    for (var x in PARAMS) {        
	        var opt = document.createElement("textarea");        
	        opt.name = x;        
	        opt.value = PARAMS[x];        
	        temp.appendChild(opt);        
	    }        
	    document.body.appendChild(temp);        
	    temp.submit();        
	    return temp;        
	}   
	
	</script>
</head>
<body>	
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">
							合同模板属性配置 <a class="btn btn-default btn-sm pull-right"
								href="javascript:void(0)" onclick="history.go(-1)">返回</a>
						</h3>
					</div>
					<div class="panel-body">
					<form action="" method="post" id="paramForm">
						<div>
							<input type="text" value="${template.id}" id="t_id" style="display: none;" /> 
							<input type="text" value="${template.templateContent}" id="templateContent" style="display: none;" /> 
							<span style="font-size: 12px;">模板名称： <input type="text" value="${template.templateName}" id="templateName" style="border: #7f9db9 1px solid; background: #FFFFFF; font-size: 12px; color: #333333; height: 20px; line-height: 18px; width: 200px;" /></span>
						</div>
						<br/>
						
						<tags:message content="${message}" />
							<table id="paramTab">
							 	<tbody id="tbody1">  
								<c:forEach var="rule" items="${list }" varStatus="i" begin="0">
									<tr>
										<td><span>模板变量名：<input
												type="text" name="templateVariableName" id="templateVariableName${i.index }"
												value="${rule.templateVariableName }"
												style="border: #7f9db9 1px solid; background: #FFFFFF; font-size: 12px; color: #333333; height: 20px; line-height: 18px; width: 100px;" />&nbsp;&nbsp;&nbsp;&nbsp;</span>
										</td>
										
										<td><span>对象属性名：<input
												type="text" name="objPropertyName" id="objPropertyName${i.index }"
												value="${rule.objPropertyName }"
												style="border: #7f9db9 1px solid; background: #FFFFFF; font-size: 12px; color: #333333; height: 20px; line-height: 18px; width: 100px;" />&nbsp;&nbsp;&nbsp;&nbsp;</span>
										</td>
										
										<td><span>属性类型：
												<select id="objPropertType${i.index }" name="objPropertType${i.index }">
													<option value="3"
														<c:if test="${rule.objPropertType == 3 }">selected="selected"</c:if>>一般对象</option>
													<option value="0"
														<c:if test="${rule.objPropertType == 0 }">selected="selected"</c:if>>文本</option>
													<option value="1"
														<c:if test="${rule.objPropertType == 1 }">selected="selected"</c:if>>字典</option>
													<option value="2"
														<c:if test="${rule.objPropertType == 2 }">selected="selected"</c:if>>时间</option>
													<option value="4"
														<c:if test="${rule.objPropertType == 4 }">selected="selected"</c:if>>集合对象</option>
											</select>
										</span>&nbsp;&nbsp;&nbsp;&nbsp;</td>
										
										<td><span>数据格式：
												<input type="text" value="${rule.objPropertFormat }" name="objPropertFormat"
												id="objPropertFormat${i.index }"
												style="border: #7f9db9 1px solid; background: #FFFFFF; font-size: 12px; color: #333333; height: 20px; line-height: 18px; width: 100px;" />
										</span>&nbsp;&nbsp;&nbsp;&nbsp;</td>
										
										<td>
											<a href="javascript:void(0)" onclick="removeFile(this,this.parentElement.parentElement.rowIndex)">&nbsp;&nbsp;删除</a>
										</td>
									</tr>
								</c:forEach>
								</tbody>
							</table>
						</form>
					</div>
					<div class="form-group" style="text-align: center; width: 600px;">
						<input class="btn btn-primary" type="button" value="添加参数"  id="addParam"
							onclick="InsertRow()" />
						 <input class="btn btn-primary"
							type="button" value="保存参数" onclick="formSubmit(${job_id})" />
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>